<template>
	<div class="radio-wraper">
		<div class="nav-head"><router-link to="/layout/musLib"><img src="../../../assets/icon-return45.png"></router-link><div class="title">电台</div></div>
		<div class="top-blank"></div>
		<div class="radio-outer">
			<div class="radio-nav">
				<div class="radio-sort">
					<h2><router-link to="/radSor">电台分类</router-link></h2>
					<div class="radio-mv">
						<img src="../../../assets/radio-pic1.png">
						<p>跨界也是疯狂</p>
					</div>
				</div>
				<div class="radio-boader">
					<h2><router-link to="/radBoa">电台排行</router-link></h2>
					<div class="radio-mv">
						<img src="../../../assets/radio-pic1.png">
						<p>你向往的地方是哪</p>
					</div>
				</div>
			</div>
			<div class="tj-look">
				<h2>推荐观看</h2>
				<div class="tj-list">
					<div>
						<img src="../../../assets/tuijian-pic1.png">
						<p>我们会等你的</p>
					</div>
					<div class="mr15">
						<img src="../../../assets/tuijian-pic3.png">
						<p>我们会等你的</p>
					</div>
					<div>
						<img src="../../../assets/tuijian-pic2.png">
						<p>我们会等你的</p>
					</div>
					<div>
						<img src="../../../assets/tuijian-pic3.png">
						<p>我们会等你的</p>
					</div>
					<div class="mr15">
						<img src="../../../assets/tuijian-pic1.png">
						<p>我们会等你的</p>
					</div>
					<div>
						<img src="../../../assets/tuijian-pic2.png">
						<p>我们会等你的</p>
					</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../components/music_player'
	export default {
		name:"radio",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.radio-outer{
	overflow: hidden;
	width: 100%;
	.radio-nav{
		width: 100%;
		overflow: hidden;
		div{
			float: left;
			width: 370 / 100rem;
			text-align: center;
			h2{
				font-size: 30 / 100rem;
				padding-top: 32 / 100rem;
				padding-bottom: 27 / 100rem;
			}
			div{
				width: 100%;
				img{
					width: 100%;
				}
				p{
					text-align: left;
					text-indent: 10 / 100rem;
					margin-top: 15 / 100rem;
					font-size: 24 / 100rem;
				}
			}
		}
		.radio-sort{
			margin-right: 10 / 100rem;
		}
	}
	.tj-look{
		width: 100%;
		overflow: hidden;
		margin-top: 46 / 100rem;
		h2{
			a{
				margin-left: 20 / 100rem;
				font-size: 30 / 100rem;
			}
		}
		.tj-list{
			margin-top: 20 /100rem;
			font-size: 24 / 100rem;
			overflow: hidden;
			div{
				float: left;
				width: 240 / 100rem;
				margin-bottom: 27 / 100rem;
				img{
					width: 100%;
				}
				p{
					margin-top: 10 / 100rem;
					margin-left: 10 / 100rem;
				}
			}
			.mr15{
				margin-left: 15 / 100rem;
				margin-right: 15 / 100rem;
			}
		}
	}
}	
</style>